import React, { useEffect, useState } from 'react';

const Clock: React.FC = () => {
  const [rotate, setRotate] = useState({
    h: '',
    m: '',
    s: '',
  });

  const getDeg = () => {
    const oDate = new Date();
    const h = oDate.getHours();
    const m = oDate.getMinutes();
    const s = oDate.getSeconds();
    const ms = oDate.getMilliseconds();

    setRotate({
      h: `rotate(${(h + m / 60 + s / 3600 + ms / 3600000) * 30}deg)`,
      m: `rotate(${(m + s / 60 + ms / 60000) * 6}deg)`,
      s: `rotate(${Math.ceil(s + ms / 800 + 2) * 6}deg)`,
    });
  };

  useEffect(() => {
    getDeg();
  }, []);

  return (
    <div className="clock-wrapper">
      <div className="clock-border">
        <div className="clock">
          <ul className="minute-marks">
            <li className="five"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li className="five"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li className="five"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li className="five"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li className="five"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li className="five"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <div className="hour" style={{ transform: rotate.h }}>
            <div className="hand"></div>
          </div>
          <div className="minute" style={{ transform: rotate.m }}>
            <div className="hand"></div>
          </div>
          <div className="second" style={{ transform: rotate.s }}>
            <div className="hand"></div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Clock;
